<template>
  <!--头部-->
  <header>
    <HeaderMod></HeaderMod>
  </header>
  <!--主体 -->
  <main>
    <!-- 天气查询 -->
    <SearchMod></SearchMod>
    <div class="recent">
      <span>近期天气</span>
      <!-- 天气卡片 -->
      <CardMod></CardMod>
    </div>
  </main>
</template>

<script setup>
import HeaderMod from '../components/HeaderMod.vue';
import SearchMod from '../components/SearchMod.vue';
import CardMod from '../components/CardMod.vue';

</script>

<style lang="scss" scoped>
//主体样式
main {
  margin: 30px 160px;
  .recent {
    margin-top: 36px;
    span {
      color: #ffffff;
      font-size: 17px;
    }
  }
}
</style>
